<template>
  <footer class="index-footer">
    <header class="i-f-header">
      推荐商家
    </header>
    <nav class="i-f-nav">
      <div class="i-f-nav-title">
        <div class="i-f-nav-item strong ellipsis" data-select @click.stop="selectnavItem">
          {{navListItem}}
          <span class="iconfont icon-sanjiaoxia"></span>
        </div>
        <div class="i-f-nav-item ellipsis"  v-for="(item, index) in navList.outside" :key="index" @click="selectnavItem($event, item)">{{item.name}}</div>
        <div class="i-f-nav-item ellipsis" @click.stop="selectnavItem" data-screening>筛选<span class="iconfont icon-zy_shaixuan"></span></div>
      </div>
      <div class="sele-list" v-if="menuVisible">
        <div class="selected-box" v-if="menuContent === 'select'">
          <p class="selected-item flex-row-sb-center" v-for="item in navList.inside" :key="item.value" @click="changeType(item, $event)">{{item.name}}<span class="iconfont icon-duigou"></span></p>
        </div>
        <div class="screening-box" v-if="menuContent === 'screening'">
          <div style="padding: 10px;">
            <p class="screening-title">商家服务（可多选）</p>
            <div class="screening-content">
              <template v-if="screeningData.deliveryMode">
                <div class="screening-item" @click.stop="checkboxShopServer($event, screeningData.deliveryMode)">
                  <img-format :src="screeningData.deliveryMode.icon_hash" class="suport-icon" :size="25" />
                  {{screeningData.deliveryMode.text}}
                </div>
              </template>
              <div class="screening-item" v-for="item in screeningData.supports" :key="item.id" @click="checkboxShopServer($event, item)">
                <img-format :src="item.icon_hash" class="suport-icon" :size="25" />
                {{item.name}}
              </div>
            </div>
            <p class="screening-title">优惠活动（单选）</p>
            <div class="screening-content" id="activity">
              <div class="screening-item" v-for="item in screeningData.activityTypes" :key="item.id" @click="radioActivity($event, item)">
                {{item.name}}
              </div>
            </div>
            <p class="screening-title">人均消费</p>
            <div class="screening-content" id="average">
              <div class="screening-item" v-for="item in screeningData.averageCosts" :key="item.id" @click="radioAverageCosts($event, item)">
                {{item.description}}
              </div>
            </div>
          </div>
          <div class="filter-btn-box flex-row-sb-center">
            <button :class="['filter-btn', 'filter-clear', clearBtn? 'clear-btn': '']" @click="clearSelect">清空</button>
            <button class="filter-btn filter-sure" @click.stop="screenRst">确认</button>
          </div>
        </div>
      </div>
    </nav>
    <div class="main-content">
      <div class="not-login flex-col-center" v-if="!$store.state.token">
        <img class="no-img" src="https://fuss10.elemecdn.com/d/60/70008646170d1f654e926a2aaa3afpng.png" />
        <p class="not-result">没有结果</p>
        <p class="more-shop">登录后查看更多商家</p>
        <button class="login-btn" @click="$router.push('/login')">登录</button>
      </div>
      <div class="is-login" v-else>
        <rst-list :list="restaurantList" class="load-more" />
      </div>
    </div>
  </footer>
</template>

<script>
import { getNearbyRestaurant, dislikeRestaurant } from '@/api/elm-data'
import ImgFormat from '_c/imgFormat/ImgFormat.vue'
import RstList from '_c/rstList/RstList.vue'
export default {
  name: 'index-footer',
  data() {
    return {
      navListItem: '综合排序',
      navList: {
        inside: [],
        outside: []
      },
      screeningData: {
        activityTypes: [],
        averageCosts: [],
        supports: [],
        deliveryMode: []
      },
      menuContent: 'select',
      restaurantList: [],
      showMore: {
        page: 1,
        size: 8
      },
      flag: true,
      getEle: true,
      req: {
        latitude: '',
        longitude: '',
        order_by: '',
        limit: 8,
        offset: 0
      },
      menuVisible: false,
      params: {
        'support_ids[]': [],
        'activity_types[]': '',
        cust_from: '',
        cust_to: ''
      },
      clearBtn: false,
      interval: ''
    }
  },
  components: {
    ImgFormat,
    RstList
  },
  async created() {
    const { data: info } = JSON.parse(window.sessionStorage.getItem('index-data'))
    console.log(info)
    this.navList.inside = info.outside.inside_sort_filter
    this.navList.outside = info.outside.outside_sort_filter
    this.screeningData.supports = info.bar.supports
    this.screeningData.activityTypes = info.bar['activity_types']
    this.screeningData.averageCosts = info.bar['average_costs']
    this.screeningData.deliveryMode = info.bar['delivery_mode']
    console.log(this.navList)
    console.log(this.screeningData)
    this.$nextTick(() => {
      !document.querySelector('.nav-mask') && (document.querySelector('.i-f-nav-title').style.borderBottom = 'none')
    })
    this.req.latitude = JSON.parse(window.sessionStorage.getItem('Geo')).latitude
    this.req.longitude = JSON.parse(window.sessionStorage.getItem('Geo')).longitude
    if(this.$store.state.token && this.req.lat !== '') {
      const { data } = await getNearbyRestaurant(this.req)
      console.log(data)
      if(data.name && data.name === 'UNAUTHORIZED') {
        this.$toast('当前登录身份信息已过期，请重新登录')
        window.sessionStorage.setItem('token', '')
        return
      }
      if(data?.items?.length > 0) {
        this.restaurantList = data.items
      }else {
        console.log(this.$store.state.token)
        if(!this.$store.state.token) {
          this.$toast('当前登录身份信息已过期，请重新登录')
        }else {
          this.$toast('附近餐馆都被外星人掳走了，先休息一会儿吧！', 'center')
        }
      }
    }
  },
  methods: {
    selectnavItem(e, item) {
      if(e.target.nodeName === 'SPAN') return false
      if((e.target.attributes['data-select'] || e.target.attributes['data-screening']) && !this.menuVisible) {
        this.menuVisible = true
        document.querySelector('.index-header').classList.add('margin-top')
        document.querySelector('.i-f-nav').classList.add('nav-mask')
        const list = document.querySelectorAll('.i-f-nav-item')
        list.forEach(item => {
          item.classList.add('adjustment-style')
        })
      }else {
        this.req.order_by = item?.value || ''
        this.getRst(this.req)
        this.backState()
        this.menuVisible = false
        e.target.classList.add('strong')
        return
      }
      this.removeStrong('.i-f-nav-title')
      e.target.classList.add('strong')
      if(this.menuVisible) {
        this.removeFontColor('.i-f-nav-title')
        e.target.classList.add('font-color')
        e.target.attributes['data-select'] && (this.menuContent = 'select')
        e.target.attributes['data-screening'] && (this.menuContent = 'screening')
        if(this.menuContent === 'screening') {
          this.interval = setInterval(() => {
            if(document.querySelector('.is-selected')) {
              this.clearBtn = true
            }else {
              this.clearBtn = false
            }
          }, 100)
        }
      }
    },
    preventEvent(e) {
      e.stopPropagation()
      e.preventDefault()
      return false
    },
    removeFontColor(el) {
      document.querySelector(el + ' .font-color')?.classList?.remove('font-color')
    },
    removeStrong(el) {
      document.querySelectorAll(el + ' .strong')?.classList?.remove('strong')
    },
    changeType(item, e) {
      console.log(item)
      document.querySelector('.selected-item .font-color')?.classList.remove('font-color')
      this.navListItem = item.name
      this.removeFontColor('.selected-box')
      this.removeStrong('.selected-box')
      e.target.classList.add('font-color', 'strong')
      e.target.children[0].classList.add('font-color')
      this.req.order_by = item?.value || ''
      this.getRst(this.req)
      this.backState()
      this.menuVisible = false
    },
    checkboxShopServer(e, item) {
      e = e.target
      if(e.nodeName === 'IMG') {
        e = e.parentNode.parentNode
      }
      if(e.classList.toggle('is-selected')) {
        this.params['support_ids[]'].push(item.ranking_weight)
      }else {
        this.$_.pull(this.params['support_ids[]'], item.ranking_weight)
      }
    },
    radioActivity(e, item) {
      const ais = document.querySelector('#activity .is-selected')
      if(ais && ais !== e.target) {
        ais.classList.remove('is-selected')
      }
      if(e.target.classList.toggle('is-selected')) {
        this.params['activity_types[]'] = item.ranking_weight
      }else {
        this.params['activity_types[]'] = ''
      }
    },
    radioAverageCosts(e, item) {
      const ais = document.querySelector('#average .is-selected')
      if(ais && ais !== e.target) {
        ais?.classList.remove('is-selected')
      }
      if(e.target.classList.toggle('is-selected')) {
        const arr = item.description.match(/\d+\~?\d+/)[0].split('')
        if(arr.includes('~')) {
          this.params.cust_from = arr.join('').split('~')[0]
          this.params.cust_to = arr.join('').split('~')[1]
        }else if(item.description.split('以下').length > 1){
          this.params.cust_to = item.description.match(/\d+/)[0]
        }else if(item.description.split('以上').length > 1){
          this.params.cust_from = item.description.match(/\d+/)[0]
        }
      }else{
        this.params.cust_from = ''
        this.params.cust_to = ''
      }
    },
    clearSelect() {
      const selectList = document.querySelectorAll('.screening-box .is-selected')
      selectList?.forEach(item => {
        item.classList.remove('is-selected')
      })
      this.params['support_ids[]'] = []
      this.params['activity_types[]'] = ''
      this.params.cust_to = ''
      this.params.cust_from = ''
    },
    screenRst(r) {
      if(r !== 'root') {
        let params = ''
        for(let key in this.params) {
          if(key !== 'support_ids[]') {
            params += '&' + key + '=' + this.params[key]
          }else {
            this.params[key].forEach(item => {
              params += '&' + key + '=' + item
            })
          }
        }
        this.getRst(this.req, params)
      }
      this.backState()
      this.menuVisible = false
    },
    async getRst(req, params) {
      this.restaurantList = []
      const { data } = await getNearbyRestaurant(req, params)
      if(data.items.length > 0) {
        data.items.forEach(item => {
          this.restaurantList.push(item)
        })
      }else {
        this.$toast('稍等一会儿，餐馆正在飞速赶来中...', 'center')
      }
    },
    backState() {
      document.querySelector('.index-header').classList.remove('margin-top')
      document.querySelector('.i-f-nav').classList.remove('nav-mask')
      const list = document.querySelectorAll('.i-f-nav-item')
      list.forEach(item => {
        item.classList.remove('adjustment-style')
        item.classList.remove('font-color')
      })
    }
  },
  watch: {
    restaurantList() {
      this.flag = true
      this.getEle = true
    },
    menuVisible() {
      if(!this.menuVisible) {
        [...document.querySelectorAll('.nav-mask .strong')].forEach(item => {
          item.classList.remove('strong')
        })
      }else {
        [...document.querySelectorAll('.i-f-nav .strong')].forEach(item => {
          item.classList.remove('strong')
        })
      }
    }
  }
}

</script>

<style scoped lang="less">
  .index-footer {
    min-height: 895px;
  }
  .i-f-header {
    position: relative;
    margin: 30px auto;
    text-align: center;
    font-size: 32px;
    &::before {
      content: '';
      position: absolute;
      height: 3px;
      width: 40px;
      top: 50%;
      left: 250px;
      background-color: #767676;
    }
    &::after {
      content: '';
      position: absolute;
      height: 3px;
      width: 40px;
      top: 50%;
      right: 250px;
      background-color: #767676;
    }
  }
  .i-f-nav-title {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #6c6c6c;
  }
  .i-f-nav-item {
    width: 25%;
    height: 40px;
    align-self: flex-start;
    text-align: center;
    font-size: 26px;
    line-height: 40px;
    overflow: hidden;
  }
  .nav-item {
    margin-top: 0;
    font-size: 28px;
    color: #444;
  }
  .icon-sanjiaoxia {
    font-size: 20px;
    color: inherit;
  }
  .icon-zy_shaixuan {
    font-size: 28px;
  }
  .strong {
    font-weight: 600;
  }
  .nav-mask {
    position: fixed;
    top: 82px;
    left: 0;
    width: 100%;
    height: calc(100vh - 170px);
    background-color: rgba(0, 0, 0, .4);
    z-index: 999;
  }
  .adjustment-style {
    font-size: 30px;
    padding: 15px;
  }
  .font-color {
    color: #00A9FF!important;
  }
  .sele-list {
    background-color: #fff;
  }
  .selected-box {
    padding: 10px;
  }
  .screening-box {
    border-top: 1px solid transparent;
  }
  .selected-item {
    padding-left: 10px;
    font-size: 26px;
    color: #565656;
  }
  .screening-content {
    display: flex;
    flex-wrap: wrap;
  }
  .screening-title {
    font-size: 22px;
    color: #565656;
  }
  .screening-item {
    padding: 15px 0;
    margin: 10px;
    width: 30%;
    background-color: #f0f0f0;
    font-size: 24px;
    color: #323;
    text-align: center;
    box-sizing: border-box;
  }
  .filter-btn-box {
    margin-top: 20px;
    box-shadow: 0 0 2px #a7a7a7;
  }
  .filter-btn {
    padding: 26px;
    border: none;
    width: 50%;
    font-size: 32px;
  }
  .filter-clear {
    background-color: #fff;
    color: #D8D8D8;
  }
  .clear-btn {
    color: #111;
  }
  .filter-sure {
    background-color: #00D762;
    color: #fff;
  }
  .is-selected {
    color: #0097FF;
    background-color: #edf5ff;
  }
  .main-content {
    margin-top: 10px;
  }
  .no-img {
    width: 60%;
  }
  .not-result {
    margin: 10px 0 0;
    font-size: 30px;
    color: #686868;
  }
  .more-shop {
    color: #8d8d8d;
    font-size: 22px;
  }
  .login-btn {
    width: 25%;
    padding: 10px;
    background-color: #00D762;
    border: none;
    color: #fff;
    font-size: 28px;
  }
  .icon-duigou {
    font-size: 24px;
    color: transparent;
  }
  .is-login {
    padding-bottom: 100px;
  }
</style>
